import { useState } from 'react'
import Meal from './components/Meal'
import './App.scss'

function App() {
    const [meals] = useState<Array<mealObj>>(
        new Array(10).fill(null).map((_, index) => {
            return {
                id: index.toString(),
                title: `第${index + 1}道菜`,
                price: (index + 1) * 10 - 0.1,
                // description: `${Math.floor(Math.random() * Math.pow(16, 100)).toString(16)}`,
                description: `上空的飞机螺丝扣搭街坊立刻是发射点立刻管理开始独立开发的发动机离开书法家离开洒家`,
                num: 0,
            }
        })
    )
    return (
        <div className='App'>
            {meals.map((item, index) => (
                <Meal
                    key={item.id}
                    {...item}
                    onAdd={() => {
                        item.num++
                    }}
                    onSub={() => {
                        item.num--
                    }}
                />
            ))}
        </div>
    )
}

export default App
